<template>
<view>
	<view class="group-box" :style="'min-height:calc(100vh - 122rpx - '+CustomBar+'px)'">
		<view class="caption" @click="chooseFutures">
			<text>先锋期货</text>
			<image src="@/static/home/subpage/drop-gray.png"></image>
		</view>
		<view class="navbar-box">
			<view class="box">
				<view class="li" :class="{'active':navfixIndex==0}" @click="navfix(0)">多单持仓</view>
				<view class="li" :class="{'active':navfixIndex==1}" @click="navfix(1)">空单持仓</view>
				<view class="li" :class="{'active':navfixIndex==2}" @click="navfix(2)">净持仓</view>
				<view class="li" :class="{'active':navfixIndex==3}" @click="navfix(3)">成交量</view>
			</view>
		</view>
		<block v-if="true">
		<view class="pie-box" v-if="navfixIndex==0||navfixIndex==1">
			<view class="left">
				<l-echart ref="pieChart" @finished="pieInit"></l-echart>
			</view>
			<view class="right">
				<view class="table">
					<view class="tr">
						<view class="tl">品种</view>
						<view class="tl">多单持仓/占比</view>
					</view>
					<view class="box">
						<view class="row" v-for="(item,index) in 5">
							<view class="tl">
								<view class="flex">
									<view class="circle"></view>
									<text>纯碱</text>
								</view>
							</view>
							<view class="tl">
								<view class="sup">58343</view>
								<view class="sub">13.48%</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="table-box">
			<view class="table">
				<view class="tr">
					<view class="tl">品种合约</view>
					<view class="tl">
						<text>多单持仓</text>
						<view class="drop">
							<view class="icn-top"></view>
							<view class="icn-bottom icn-red"></view>
						</view>
					</view>
					<view class="tl">
						<text>增减</text>
						<view class="drop">
							<view class="icn-top"></view>
							<view class="icn-bottom"></view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="row" v-for="(item,index) in 5">
						<view class="flex">
							<view class="tl" @click="varietyInfo(index)">
								<text>纯碱</text>
								<image :hidden="index==varietyIndex" src="@/static/home/subpage/drop-gray.png"></image>
								<image :hidden="index!=varietyIndex" src="@/static/home/subpage/up-gray.png"></image>
							</view>
							<view class="tl">58343</view>
							<view class="tl">479</view>
						</view>
						<view class="drop-box" :hidden="index!=varietyIndex">
							<view class="col" v-for="(item,index) in 4">
								<view class="li">纯碱2401</view>
								<view class="li">58343</view>
								<view class="li">58343</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</block>
		<view v-else class="nodata">
			<image src="@/static/home/subpage/no-data.png"></image>
		</view>
	</view>	
</view>
</template>

<script>
import * as echarts from '@/utils/echarts.min.js';	
export default {
	name:"variety",
	data() {
		return {
			CustomBar: this.CustomBar,
			navfixIndex:0,
			pieOption:{},
			animationData: {},
			animation:{},
			minHeight:0,
			varietyIndex:-1
		};
	},
	mounted(){
		// var animation = uni.createAnimation({
		// 	duration: 500,
		// 	timingFunction: 'ease',
		// })
		// this.animation =animation;
	},
	methods:{
		pieInit(){
			var data=[];
			if(this.navfixIndex==0){
				data=[
					{ value: 1048, name: '国泰君安' },
					{ value: 735, name: '中信期货' },
					{ value: 580, name: '先锋期货' },
					{ value: 484, name: '信达期货' },
					{ value: 300, name: '永安期货' }
				]
			}else{
				data=[
					{ value: 148, name: '国泰君安' },
					{ value: 1735, name: '中信期货' },
					{ value: 580, name: '先锋期货' },
					{ value: 484, name: '信达期货' },
					{ value: 300, name: '永安期货' }
				]
			}
			this.pieOption={
				legend: {
					show:false
				},
				series: [
					{
						name: '多单持仓',
						type: 'pie',
						radius: ['70%', '95%'],
						avoidLabelOverlap: false,
						center: ['49%', '50%'],
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 13,
								// formatter: '{b}: {d}',
								formatter: function (value, index) {
									return `${value.name}: ${value.percent}%`
								},
								color: 'rgba(0,0,0,0.45)'
							}
						},
						labelLine: {
							show: false
						},
						data: data
					}
				]
			};
			this.$refs.pieChart.init(echarts, chart=> {
				chart.setOption(this.pieOption);
			});
		},
		navfix(index){
			this.navfixIndex =index;
			if(this.$refs.pieChart){
				if(index==0||index==1) this.pieInit();
			}
		},
		varietyInfo(index){
			this.varietyIndex =this.varietyIndex==index?-1:index;
		},
		chooseFutures(){
			this.$emit('chooseFutures', {
				// isshare: false
			})
		},
		closeFutures(){
			this.$emit('closeFutures', {
				// isshare: false
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.group-box{
	background: #FFFFFF;
	border-radius: 16rpx;
	padding:24rpx;
	box-sizing: border-box;
	.caption{
		display: flex;
		align-items: center;
		border-bottom:2rpx solid #F6F7F9;
		padding-bottom:24rpx;
		& image{
			width:46rpx;height:46rpx;
			margin-left:8rpx;
		}
		& text{
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
		}
	}
	.navbar-box{
		margin-top:28rpx;
		background-color: #fff;
		z-index:3;
		position: relative;
		.box{
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding:4rpx;
			box-sizing: border-box;
		}
		.li{
			font-size: 24rpx;
			color: rgba(0,0,0,0.6);
			flex:1;
			text-align: center;
			height:100%;
			line-height: 72rpx;
		}
		.li.active{
			background-color: #fff;
			font-weight: bold;
			color: #EE5953;
			border-radius: 16rpx;
		}
	}
	.pie-box{
		display: flex;
		align-items: center;
		margin-top:32rpx;
		// border-bottom: 2rpx solid #F6F7F9;
		// padding-bottom:20rpx;
		.left{
			width: 330rpx;
			height:350rpx;
		}
		.right{
			flex:1;
			.table{
				.tr{
					padding-bottom:8rpx;
					display: flex;
					// border-bottom: 2rpx solid #F4F5F7;
					font-size: 24rpx;
					color: rgba(0,0,0,0.45);
					.tl{
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
				.box{
					.row{
						padding:12rpx 0;
						display: flex;
						// align-items: center;
						justify-content: space-between;
						// border-bottom: 2rpx solid #F4F5F7;
						.tl{
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
						.tl:nth-child(1){
							align-items: flex-start;
							.flex{
								display: flex;
								align-items: center;
							}
							.circle{
								width: 12rpx;
								height: 12rpx;
								border-radius: 50%;
								background: #00B7B2;
							}
							& text{
								font-size: 24rpx;
								font-weight: bold;
								color: rgba(0,0,0,0.8);
								padding-left:16rpx;
							}
						}
						.tl:nth-child(2){
							flex-direction: column;
							justify-content: flex-start;
							align-items: flex-end;
							.sup{
								font-size: 28rpx;
								color: rgba(0,0,0,0.8);
							}
							.sub{
								font-size: 20rpx;
								color: rgba(0,0,0,0.4);
							}
						}
					}
				}
				.tl:nth-child(1){
					flex: 1;
				}
				.tl:nth-child(2){
					width:156rpx;
					margin-left:42rpx;
				}
			}
		}
	}
	.table-box{
		margin-top:28rpx;
		.cl-green{
			color: #33C45B !important;
		}
		.table{
			border-top: 2rpx solid #F6F7F9;
			.tr{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F6F7F9;
				padding:24rpx 0;
				.tl{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: rgba(0,0,0,0.6);
					.drop{
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						margin-left:8rpx;
						.icn-top{
							width:0rpx;height:0rpx;
							border:8rpx solid transparent;
							border-bottom-color:#BFBFBF;
							border-bottom-width: 10rpx;
							margin-bottom:2rpx;
						}
						.icn-bottom{
							width:0rpx;height:0rpx;
							border:8rpx solid transparent;
							border-top-color:#BFBFBF;
							border-top-width: 10rpx;
							margin-top:2rpx;
						}
						.icn-red{
							border-top-color: #EE5953;
						}
					}
				}
				.tl:nth-child(3){
					padding-right:10rpx;
				}
			}
			.box{
				.row{
					.flex{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding:24rpx 0;
						border-bottom: 2rpx solid #F6F7F9;
					}
					.tl{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0,0,0,0.8);
						& image{
							width:46rpx;height:46rpx;
						}
					}
					.tl:nth-child(3){
						color: #FF3B30;
					}
					.drop-box{
						padding:20rpx;
						background: #F6F7F9;
						border-radius: 16rpx;
						.col{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top:16rpx;
							.li{
								font-size: 28rpx;
								font-weight: bold;
								width:35%;
								text-align: right;
							}
							.li:first-child{
								font-weight: 400;
								color: #356FE5;
								width:30%;
								text-align: left;
							}
							.li:last-child{
								color: #FF3B30;
								width:35%;
							}
						}
						.col:first-child{
							margin-top:0;
						}
					}
				}
				.row:last-child{
					.flex{
						border-bottom:0;
					}
				}
			}
			.tl:nth-child(1){
				width:30%;
				justify-content: flex-start;
				padding-left:24rpx;
			}
			.tl:nth-child(2){
				width:35%;
				justify-content: flex-end;
			}
			.tl:nth-child(3){
				width:35%;
				justify-content: flex-end;
				padding-right:24rpx;
			}
		}
	}
}	
.nodata{
	padding-top:82rpx;
	padding-bottom:24rpx;
	text-align: center;
	& image{
		width:294rpx;height:326rpx;
	}
}
</style>